<html>
    <head>
    	<meta charset="utf-8" />
    	<title>js切换效果</title>
    </head>
    <style type="text/css">
        #lb{width: 1024px;height: 374px;margin: 0 auto;border: 1px solid #000;overflow: hidden;position: relative;}
        ul,li{margin: 0;padding:0;}
        #lb ul{width: 3072px;position: absolute;left: 0;top:0;}
        #lb ul li{list-style-type: none;float: left;}
        p{opacity: 0.6;width: 100%;width: 1024px;height: 30px;position: absolute;top:260px;background: #ccc;text-align: center;}
        p span{text-align: center;width: 30px;height: 30px;background: #000;line-height: 30px;color: #fff;padding: 4px 8px;border-radius: 50%;}
        .cur{background: red;}
        #left{z-index: 1;width: 50px;height: 30px;background: #ccc;position: absolute;top:160px;}
        #right{z-index: 1;width: 50px;height: 30px;background: #ccc;position: absolute;top:160px;right: 0;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    	var oul=document.getElementsByTagName('ul');
    	var oli=document.getElementsByTagName('li');
    	var ospan=document.getElementsByTagName('span');
    	var oleft=document.getElementById('left');
    	var oright=document.getElementById('right');
    	var num=0;
    	var time=null;
    	/*自动切换方法show*/
        function show(){
                time=setInterval(function () { 
                for(var j=0;j<ospan.length;j++){
        			//this.className="";
        			ospan[j].className="";
        		}     	
        		if(num==oli.length-1){
        			num=0;
        		}else{
        			num++;
        		}
        		oul[0].style.left=(-num*1024)+"px";
        		ospan[num].className="cur";
            },3000); 
        } 
        show(); 	//调用方法show
        for(var i=0;i<ospan.length;i++){
        	ospan[i].index=i;
        	ospan[i].onmouseover=function(){
        		clearInterval(time);
        		for (var j = 0; j < ospan.length; j++) {
        			ospan[j].className="";
        		};
        		this.className="cur";
        		oul[0].style.left=(-this.index*1024)+"px";
        	}
        	ospan[i].onmouseout=function(){
        		show();
        	}
        	oli[i].onmouseover=function(){
                    clearInterval(time);
            }
            oli[i].onmouseout=function(){
                    show();
            }     
        }

        oleft.onclick=function(){
            if(num==0){
            num=ospan.length-1;
            }else{
            	num--;
            }
            for (var j = 0; j < ospan.length; j++) {
            	ospan[j].className="";
            	clearInterval(time);
            };
            ospan[num].className="cur";
            oul[0].style.left=(-num*1024)+"px";
        }

        oright.onclick=function(){
            if(num==ospan.length-1){
                num=0;
            }else{
            	num++;
            }
            for (var j = 0; j < ospan.length; j++) {
            	ospan[j].className="";
            	clearInterval(time);
            };
            ospan[num].className="cur";
            oul[0].style.left=(-num*1024)+"px";
        }
    }
        
    </script>
    <body>
    	<div id="lb">
    		<div id="left">

    		</div>
    		<ul>
    			<li><img src="imgs/02.jpg" width="1024" height="373" /></li>
    			<li><img src="imgs/03.jpg" width="1024" height="373" /></li>
    			<li><img src="imgs/04.jpg" width="1024" height="373" /></li>
    		</ul>
    		<p>
    			<span class="cur">1</span>
    			<span>2</span>
    			<span>3</span>
    		</p>
    		<div id="right">
    		</div>
    	</div>
    </body>
</html>